<template>
  <baidu-map
    :center="center"
    :zoom="zoom"
    style="width:100%; height:400px"
    @click="getClickInfo"
    @ready="onBaiduMapReady"
  >
    <bm-control>
      <bm-auto-complete v-model="keyword" :sug-style="{zIndex:1}">
        <el-input v-model="keyword" placeholder="请输入地名关键字" style="width: 300px" />
      </bm-auto-complete>
    </bm-control>
    <bm-local-search :keyword="keyword" :auto-viewport="true" :panel="false" />
    <bm-navigation anchor="BMAP_ANCHOR_TOP_RIGHT" />
  </baidu-map>
</template>

<script>

export default {
  name: 'CustomBMap',
  props: {
    center: {
      type: Object,
      default() {
        return {
          lng: 117,
          lat: 36.65
        }
      }
    },
    zoom: {
      type: Number,
      default: 10
    }
  },
  data() {
    return {
      BMap: null,
      keyword: ''
    }
  },
  methods: {
    onBaiduMapReady(e) {
      this.BMap = e.BMap
    },
    getClickInfo(e) {
      const that = this
      const geoCoder = new this.BMap.Geocoder()
      geoCoder.getLocation(e.point, function(res) {
        that.keyword = res.address
      })
      this.$emit('queryPoint', e.point)
    }
  }
}
</script>

<style scoped>
  ::v-deep .BMap_cpyCtrl.BMap_noprint.anchorBL {
    display: none;
  }
</style>
